<template>
    <div class="article-comments">
        <!-- 当前评论 -->
        <van-cell title="当前评论" :border="false">
            <van-image
                slot="icon"
                round
                width="30"
                height="30"
                style="margin-right: 10px;"
                :src="currentCommon.aut_photo"
                />
            <span style="color: #466b9d;" slot="title"> {{ currentCommon.aut_name }} </span>
            <div slot="label">
                <p style="color: #363636;"> {{ currentCommon.content }} </p>
                <p>
                    <span style="margin-right: 10px;">  {{ currentCommon.pubdate | fromNow }} </span>
                </p>
            </div>
            <van-icon slot="right-icon" />
        </van-cell>
        <!-- /当前评论 -->
        <van-divider>全部回复</van-divider>

        <!-- 对当前评论 回复列表 -->
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
            <van-cell v-for="item in list" :key="item.aut_id">
                <van-image
                    slot="icon"
                    round
                    width="30"
                    height="30"
                    style="margin-right: 10px;"
                    :src="item.aut_photo"
                    />
                <span style="color: #466b9d;" slot="title"> {{ item.aut_name }} </span>
                <div slot="label">
                    <p style="color: #363636;"> {{ item.content }} </p>
                    <p>
                        <span style="margin-right: 10px;"> {{ item.pubdate | fromNow }} </span>
                    </p>
                </div>
            </van-cell>
        </van-list>
        <!-- 回复列表 -->

        <!-- 发布回复 -->
        <van-cell-group class="publish-wrap">
            <van-field clearable placeholder="请输入回复内容" v-model.trim="content" >
                <van-button slot="button" size="mini" type="info" @click="publishFn">发布</van-button>
            </van-field>
        </van-cell-group>
        <!-- /发布回复 -->
    </div>
</template>
<script>
import { getCommonToCommon, addCommonToCommon } from '@/api/article'

export default {
  name: 'CommentReply',
  props: ['currentCommon'],
  data() {
    return {
      list: [], // 评论列表
      loading: false, // 上拉加载更多的 loading
      finished: false, // 是否加载结束
      offset: null, // 页码
      content: '' // 评论内容
    }
  },
  methods: {
    // 评论回复列表渲染
    async onLoad() {
      const res = await getCommonToCommon(
        this.currentCommon.com_id,
        this.offset
      )
      console.log(res.data.results)
      console.log(this.currentCommon.com_id)
      this.list = [...this.list, ...res.data.results]
      this.loading = false
      this.offset = res.data.last_id

      if (res.data.results.length === 0) {
        this.finished = true
      }
    },

    async publishFn() {
      if (!this.content) {
        return this.$toast('回复的内容不能为空')
      }

      const res = await addCommonToCommon(
        this.artId,
        this.currentCommon.com_id,
        this.content
      )
      console.log(res)

      this.list.unshift(res.data.new_obj)
      this.$toast('发布成功')
      this.content = ''
      this.$emit('addCommonCout')
    }
  }
}
</script>
<style lang="less" scoped>
    // 发表评论的区域是固定在下端的
    .publish-wrap {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
    }
    // 给发表评论区空出地方
    .van-list {
        margin-bottom: 45px;
    }
</style>
